<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">消课统计
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <div class="order_title"
                     style="display: flex;justify-content: space-between;">
                    记录列表
                    <div id=""
                         style="display: flex;">
                        <el-form :inline="true"
                                 label-width="80px"
                                 :model="queryData">
                            <el-form-item label=""
                                          style="margin-bottom: 0px;">
                                <el-date-picker v-model="beginEndTime"
                                                type="datetimerange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                        </el-form>
                        <el-button icon="el-icon-download"
                                   type="primary"
                                   @click="expor">导出消课统计数据</el-button>
                    </div>

                </div>
                <el-divider></el-divider>
                <el-table v-loading="loading"
                          :data="tableData"
                          stripe
                          class="my_table"
                          ref="multipleTable"
                          header-cell-class-name="table-header">
                    <el-table-column prop="productName"
                                     label="课程"
                                     align="center">
                    </el-table-column>
                    <el-table-column label="学生姓名"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.childrens.childrenName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="消课状态"
                                     align="center">
                        <template slot-scope="scope">
                            <div class="u-flex-col u-col-center">
                                <span :style="scope.row.status | colorFilter">{{ scope.row.status | statusFilter }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="eliminateTime"
                                     label="消课时间"
                                     align="center">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue'
import { exportExcel } from '@/utils/exportExcel.js'
export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            beginEndTime: "",
            pageTotal: 0,
            loading: false,
            tableData: [],
            classList: [
                { id: 1, name: '一年级', }, { id: 2, name: '二年级', }, { id: 3, name: '三年级', }, { id: 4, name: '四年级', },
                { id: 5, name: '五年级', }, { id: 6, name: '六年级', }, { id: 7, name: '初一', }, { id: 8, name: '初二', }, { id: 9, name: '初三', },
            ],
            queryData: {
                pageNum: 1,
                pageSize: 10,
                startTime: "",
                endTime: "",
            },
        };
    },
    watch: {
        beginEndTime(newV, oldValue) {
            if (newV && newV.length > 0) {
                //  + ' 00:00:00' + ' 23:59:59'
                this.queryData.startTime = newV[0]
                this.queryData.endTime = newV[1]
            } else {
                delete this.queryData.startTime
                delete this.queryData.endTime
            }

        },
    },
    filters: {
        statusFilter(status) {
            switch (status) {
                case 0:
                    return '正常'
                case 1:
                    return '请假'
                case 2:
                    return '缺勤'
            }
        },
        colorFilter(status) {
            switch (status) {
                case 0:
                    return 'color:#67C23A;'
                case 1:
                    return 'color:#E6A23C;'
                case 2:
                    return 'color:#F56C6C;'
            }
        },
    },
    created() {
        this.getTableData();
    },
    methods: {
        expor() {
            if (this.queryData.startTime && this.queryData.endTime) {
                let data = Object.assign({}, this.queryData)
                let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
                console.log('--------------------userInfo', userInfo)
                data.schoolId = userInfo.schoolId
                data.startTime = this.queryData.startTime
                data.endTime = this.queryData.endTime
                exportExcel(data, '消课统计数据Excel', 'admin/excel/studentLeaveExcel')
            } else {
                this.$message.error("请选择导出的时间段")
            }
        },
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/admin/eliminateClass/listPage",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    _this.tableData = res.data.list;
                    _this.pageTotal = res.data.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
    }
};
</script>

<style lang="scss" scoped >
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss">
/deep/.el-form-item {
    margin-bottom: 0rpx !important;
}
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>
